<template>
  <el-container class="home-checked" v-if="!showDetail" v-loading="loading">
    <el-header class="header search-header">
      <el-form
        ref="ruleFormRef"
        class="between-form"
        :model="search"
        :inline="true"
      >
        <div>
          <el-form-item label="时间" prop="time">
            <el-date-picker
              style="width: 250px"
              v-model="search.time"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item label="服务公司" prop="uploadCompany">
            <el-input
              v-model="search.uploadCompany"
              placeholder="请输入服务公司名称"
              clearable
            />
          </el-form-item>
        </div>

        <el-form-item>
          <el-button
            type="primary"
            class="search-btn"
            @click="getSearch(ruleFormRef)"
          >
            查询
          </el-button>
          <el-button @click="reset(ruleFormRef)" class="reset-btn"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-container>
        <el-main>
          <el-container>
            <el-main class="container bc-table">
              <div class="table-item-content">
                <div
                  @click="jumpdetail(item)"
                  class="table-box-item"
                  v-for="(item, idx) in objecInfo.tableData"
                  :key="idx"
                >
                  <div class="top-box">
                    <!-- <img
                      class="typeicon"
                      src="../../../assets/images/docx.png"
                    /> -->
                    <img
                      class="typeicon"
                      v-if="item.fileType == 'docx'"
                      src="../../../assets/images/docx.png"
                    />
                    <img
                      class="typeicon"
                      v-else
                      src="../../../assets/images/pdf.png"
                    />
                    <span class="name">{{ item.fileName }}</span>
                  </div>
                  <div class="bottom-box">
                    <p class="text">{{ item.uploadCompany }}</p>
                    <p class="text">{{ item.uploadTime }}</p>
                  </div>
                </div>
              </div>
            </el-main>
            <el-footer class="footer mt20">
              <el-pagination
                v-model:current-page="tableField.pageNo"
                v-model:page-size="tableField.pageSize"
                :page-sizes="[10, 20, 30, 50, 100]"
                layout="total,sizes, prev, pager, next, jumper"
                :total="total"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                prev-text="上一页"
                next-text="下一页"
              />
            </el-footer>
          </el-container>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
  <detail :currentData="currentData" v-else @close="jumpdetail"></detail>
</template>

<script setup>
import { onMounted, ref, reactive, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getTypeList, busioptions } from '@/api';
import { getAqsjdaList } from '@/api/dazx.js';
import { Minxfun } from '@/utils/minxin';
import detail from './detail.vue';
import dayjs from 'dayjs';
const {
  handleSizeChange,
  handleCurrentChange,
  tableField,
  total,
  loading,
  formatDateTime,
} = Minxfun();
const router = useRouter();

const ruleFormRef = ref();
const search = reactive({
  uploadCompany: '',
  time: [],
});

onMounted(() => {
  getTableData();
});

const getSearch = () => {
  if (tableField.value.pageNo == 1) {
    getTableData();
  } else {
    tableField.value.pageNo = 1;
    getTableData();
  }
};

const reset = (ruleFormRef) => {
  ruleFormRef.resetFields();
  search.time = [];
  getTableData();
};

watch(
  tableField,
  (newVal, oldVal) => {
    getTableData();
  },
  { deep: true }
);
let objecInfo = reactive({
  tableData: [],
});
const getTableData = async () => {
  try {
    loading.value = true;
    let { data } = await getAqsjdaList({
      ...tableField.value,
      ...search,
      pageNum: tableField.value.pageNo,
      // belongOrgId: search.belongOrgId || null,
      uploadDateBegin:
        search.time && search.time.length > 0
          ? dayjs(search.time[0]).format('YYYY-MM-DD')
          : '',
      uploadDateEnd:
        search.time && search.time.length > 0
          ? dayjs(search.time[1]).format('YYYY-MM-DD')
          : '',
    });
    loading.value = false;
    console.log({
      ...tableField.value,
      ...search,
      pageNum: tableField.value.pageNo,
    });
    objecInfo.tableData = data.inspectionReports;
    total.value = Number(data.total) || 0;
  } catch (e) {
    loading.value = false;
    console.log(e);
  }
};

let currentRow = ref(null);
const handleClick = (value) => {
  currentRow.value = value;
  showDetail.value = true;
};

// 导出
const saveExport = async () => {
  try {
    // exportVisable.value = false;
    console.log(fieldList.value);
    let params = {
      objectId: currentTab.value,
      queryOptions: searchData.value,
      orderBys: sortList.value,
      selectItems: fieldList.value.map((item) => item.props),
    };
    let config = {
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': true,
        withCredentials: true,
        'Access-Control-Expose-Headers': 'Authorization',
      },
      responseType: 'blob',
    };
    axios
      .post('/data-center/query/composite/export', params, config)
      .then((res) => {
        window.open(res.data.data.fileUrl);
        // const content = res.data;
        // const blob = new Blob([content]);
        // const fileName =
        //   decodeURI(
        //     res.headers["content-disposition"].split(";")[1].split("=")[1]
        //   ) || "文件.xlsx";
        // if ("download" in document.createElement("a")) {
        //   // 非IE下载
        //   const elink = document.createElement("a");
        //   elink.download = fileName;
        //   elink.style.display = "none";
        //   elink.href = URL.createObjectURL(blob);
        //   document.body.appendChild(elink);
        //   elink.click();
        //   URL.revokeObjectURL(elink.href); // 释放URL 对象
        //   document.body.removeChild(elink);
        // } else {
        //   // IE10+下载
        //   navigator.msSaveBlob(blob, fileName);
        // }
      });
  } catch (e) {}
};

// 跳转详情
let showDetail = ref(false);
let currentData = ref({});
const jumpdetail = (item) => {
  currentData.value = item;
  showDetail.value = !showDetail.value;
  //   router.push({
  //     path: "/securitycheckdetail",
  //     query: {
  //       id: item.id,
  //     },
  //   });
};
</script>

<style lang="scss" scoped>
.home-checked {
  width: 100%;
  height: 100%;
  .header {
    min-height: 36px;
    line-height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 18px;
    .header-l {
      display: flex;
      align-items: center;
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        letter-spacing: 1px;
        text-align: left;
        padding-left: 14px;
      }
    }
  }
  .container {
  }
}
.el-container {
  height: 100% !important;
  padding: 0 !important;
}
.el-header {
  height: auto !important;
  min-height: 36px !important;
}
.el-main {
  padding: 0 !important;
}
.search {
  margin: 0 50px;
}
.header-r {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #666666;
}

.table-item-content {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: top;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  .table-box-item {
    width: 390px;
    height: 190px;
    padding: 20px;
    background: #ffffff;
    box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
    border-radius: 12px;
    cursor: pointer;

    .top-box {
      height: 90px;
      background: #f6f9ff;
      border-radius: 12px;
      padding: 16px 16px 16px 26px;
      display: flex;
      align-items: center;

      .typeicon {
        width: 49px;
        height: 59px;
        margin-right: 12px;
      }
      .name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #000000;
        line-height: 22px;
        text-align: left;
      }
    }
    .bottom-box {
      margin-top: 12px;
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        line-height: 20px;
        opacity: 0.8;
        line-height: 20px;
      }
    }
  }
}
</style>

<style>
.el-form-item__label {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
}
</style>
